<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:s="http://jboss.com/products/seam/taglib"
      xmlns:a="http://richfaces.org/a4j"
      xmlns:r="http://richfaces.org/rich"
      xmlns:m="http://www.caradvert.com/main">

<ui:composition template="/content/templates/mainTemplate.xhtml">
    <ui:param name="selectedMenu" value="newAdvert"/>
    <ui:define name="title">#{labels['WANT_TO_SELL']}</ui:define>
    <ui:define name="body">
        <ui:decorate template="/content/templates/contentDecorator.xhtml">

            <div style="padding:0 20px 0 20px">
                <c:set var="dependsOnYear" value="priceLbl, pricePanel, descrLbl, description, contactLbl, contact, saveButton, photosLbl, photosPanel, addPhotoPanel, mileage, mileageLbl, state, stateLbl, regionLbl, region"/>
                <c:set var="dependsOnModel" value="releaseLbl, release, #{dependsOnYear}"/>
                <c:set var="dependsOnBrand" value="modelLbl, model, customModel, #{dependsOnModel}"/>
                <c:set var="dependsOnCategory" value="brand, brandLbl, customBrand, customBrandCheckbox, #{dependsOnBrand}"/>
                <c:set var="dependsOnType" value="ctegory, ctegoryLbl, #{dependsOnCategory}"/>

                <fieldset class="newAdvert">
                    <legend>#{labels['WANT_TO_SELL']}</legend>

                    <h:form id="newAdvert">
                        <table class="lj fullWide">
                            <tr>
                                <td class="oneQuarter">
                                    <label>#{labels['TRANSPORT_TYPE']}:</label>
                                </td>
                                <td>
                                    <h:selectOneMenu value="#{sellAdvertBean.advert.vehicle.typeCode}" styleClass="mediumd"
                                                     required="#{empty sellAdvertBean.advert.vehicle.typeCode}" requiredMessage="#{labels['FIELD']} '#{labels['TRANSPORT_TYPE']}' #{labels['REQUIRED']}">
                                        <f:selectItem/>
                                        <s:selectItems value="#{vehicleTypes}" var="type" itemValue="#{type.code}"
                                                       label="#{labels[type.name]}"/>
                                        <a:support event="onchange" action="#{sellAdvertBean.typeChanged}" reRender="#{dependsOnType}" ajaxSingle="true"/>
                                    </h:selectOneMenu>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h:outputLabel id="ctegoryLbl" value="#{labels['CATEGORY']}:" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.typeCode)}"/>
                                </td>
                                <td>
                                    <h:selectOneMenu id="ctegory" value="#{sellAdvertBean.advert.vehicle.categoryCode}" styleClass="mediumd"
                                                     required="#{empty sellAdvertBean.advert.vehicle.categoryCode}" requiredMessage="#{labels['FIELD']} '#{labels['CATEGORY']}' #{labels['REQUIRED']}"
                                                     style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.typeCode)}">
                                        <f:selectItem/>
                                        <s:selectItems value="#{vehicleCategories[sellAdvertBean.advert.vehicle.typeCode]}" var="category" itemValue="#{category.code}"
                                                       label="#{labels[category.name]}"/>
                                        <a:support event="onchange" action="#{sellAdvertBean.categoryChanged}" reRender="#{dependsOnCategory}" ajaxSingle="true"/>
                                    </h:selectOneMenu>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <h:outputLabel id="brandLbl" value="#{labels['BRAND']}:" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.categoryCode)}"/>
                                </td>
                                <td>
                                    <table cellpadding="0" cellspacing="0" style="margin:0;">
                                        <tr>
                                            <td>
                                                <h:selectOneMenu id="brand" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.categoryCode and not sellAdvertBean.customBrand)}"
                                                                 value="#{sellAdvertBean.advert.vehicle.brandId}" styleClass="mediumd" disabled="#{sellAdvertBean.customBrand}"
                                                                 required="#{empty sellAdvertBean.advert.vehicle.brandId and not sellAdvertBean.customBrand}" requiredMessage="#{labels['FIELD']} '#{labels['BRAND']}' #{labels['REQUIRED']}">
                                                    <f:selectItem/>
                                                    <s:selectItems value="#{vehicleBrands[sellAdvertBean.advert.vehicle.typeCode]}" var="brand" itemValue="#{brand.id}"
                                                                   label="#{brand.name}"/>
                                                    <a:support event="onchange" action="#{sellAdvertBean.brandNameChanged}" reRender="#{dependsOnBrand}" ajaxSingle="true"/>
                                                </h:selectOneMenu>
                                                <h:panelGroup id="customBrand" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.categoryCode)}">
                                                    <h:inputText rendered="#{sellAdvertBean.customBrand}" value="#{sellAdvertBean.advert.vehicle.brandName}" styleClass="medium" maxlength="50"
                                                                 required="#{sellAdvertBean.customBrand}" requiredMessage="#{labels['FIELD']} '#{labels['BRAND']}' #{labels['REQUIRED']}"/>
                                                </h:panelGroup>
                                            </td>
                                            <td>
                                                <h:panelGroup id="customBrandCheckbox" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.categoryCode)}">
                                                    <h:selectBooleanCheckbox value="#{sellAdvertBean.customBrand}">
                                                        <a:support event="onchange" action="#{sellAdvertBean.brandNameChanged}" reRender="brand, customBrand, #{dependsOnBrand}" ajaxSingle="true"/>
                                                    </h:selectBooleanCheckbox>#{labels['CUSTOM_BRAND']}
                                                </h:panelGroup>
                                            </td>
                                        </tr>
                                    </table>


                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h:outputLabel id="modelLbl" value="#{labels['MODEL']}:" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.brandId or sellAdvertBean.customBrand)}"/>
                                </td>
                                <td>
                                    <h:panelGroup id="model" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.brandId and !sellAdvertBean.customBrand)}">
                                        <h:selectOneMenu  value="#{sellAdvertBean.advert.vehicle.modelId}" styleClass="mediumd"
                                                required="#{empty sellAdvertBean.advert.vehicle.modelId and not sellAdvertBean.customBrand}" requiredMessage="#{labels['FIELD']} '#{labels['MODEL']}' #{labels['REQUIRED']}">
                                            <f:selectItem/>
                                            <s:selectItems value="#{vehicleModels}" var="model" itemValue="#{model.id}"
                                                           label="#{model.name}"/>
                                            <a:support event="onchange" action="#{sellAdvertBean.modelNameChanged}" reRender="#{dependsOnModel}" ajaxSingle="true"/>
                                        </h:selectOneMenu>
                                    </h:panelGroup>
                                    <h:inputText id="customModel" required="#{sellAdvertBean.customBrand}" requiredMessage="#{labels['FIELD']} '#{labels['MODEL']}' #{labels['REQUIRED']}" 
                                                 style="#{m:displayStyle(sellAdvertBean.customBrand)}" maxlength="50"
                                                 value="#{sellAdvertBean.advert.vehicle.modelName}" styleClass="medium"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h:outputLabel id="releaseLbl" value="#{labels['RELEASE_YEAR']}:" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.modelId or sellAdvertBean.customBrand)}"/>
                                </td>
                                <td>
                                    <h:selectOneMenu id="release" value="#{sellAdvertBean.advert.vehicle.releaseYear}" styleClass="smalld" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.modelId or sellAdvertBean.customBrand)}"
                                            required="#{empty sellAdvertBean.advert.vehicle.releaseYear}" requiredMessage="#{labels['FIELD']} '#{labels['RELEASE_YEAR']}' #{labels['REQUIRED']}">
                                        <f:selectItem/>
                                        <s:selectItems value="#{years}" var="year" itemValue="#{year}" label="#{year}"/>
                                        <a:support event="onchange" reRender="#{dependsOnYear}" ajaxSingle="true"/>
                                    </h:selectOneMenu>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h:outputLabel id="priceLbl" value="#{labels['PRICE']}:" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.releaseYear)}"/>
                                </td>
                                <td>
                                    <h:panelGroup id="pricePanel" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.releaseYear)}">
                                        <h:inputText id="price" value="#{sellAdvertBean.advert.price}" styleClass="medium" converter="currency" maxlength="12"
                                                required="#{!sellAdvertBean.agreementPrice}" requiredMessage="#{labels['FIELD']} '#{labels['PRICE']}' #{labels['REQUIRED']}"
                                                disabled="#{sellAdvertBean.agreementPrice}"/>
                                        <h:selectOneMenu id="currency" value="#{sellAdvertBean.advert.currencyCd}" styleClass="smalld"
                                                disabled="#{sellAdvertBean.agreementPrice}">
                                            <s:selectItems value="#{currencies}" var="currency" itemValue="#{currency.code}" label="#{labels[currency.name]}"/>
                                        </h:selectOneMenu>
                                        <h:selectBooleanCheckbox value="#{sellAdvertBean.agreementPrice}" >
                                            <a:support event="onchange" reRender="price, currency" ajaxSingle="true"/>
                                        </h:selectBooleanCheckbox>#{labels['AGREEMENT']}
                                    </h:panelGroup>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h:outputLabel id="stateLbl" value="#{labels['STATE']}:" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.releaseYear)}"/>
                                </td>
                                <td>
                                    <h:selectOneMenu id="state" value="#{sellAdvertBean.advert.vehicle.stateCode}" styleClass="mediumd" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.releaseYear)}">
                                        <f:selectItem/>
                                        <s:selectItems value="#{vehicleStates}" var="state" itemValue="#{state.code}" label="#{labels[state.name]}"/>
                                    </h:selectOneMenu>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h:outputLabel id="mileageLbl" value="#{labels['MILEAGE']}:" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.releaseYear)}"/>
                                </td>
                                <td>
                                    <h:panelGroup id="mileage" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.releaseYear)}">
                                        <h:inputText value="#{sellAdvertBean.advert.vehicle.mileage}" converter="integer" maxlength="7"  styleClass="medium"/>
                                        #{labels['KM']}
                                    </h:panelGroup>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h:outputLabel id="regionLbl" value="#{labels['REGION']}:" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.releaseYear)}"/>
                                </td>
                                <td>
                                    <h:selectOneMenu id="region" value="#{sellAdvertBean.advert.regionCd}" styleClass="larged" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.releaseYear)}">
                                        <f:selectItem/>
                                        <s:selectItems value="#{regions}" var="region" itemValue="#{region.code}" label="#{labels[region.name]}"/>
                                    </h:selectOneMenu>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h:outputLabel id="descrLbl" value="#{labels['DESCRIPTION']}:" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.releaseYear)}"/>
                                </td>
                                <td>
                                    <h:inputTextarea id="description" value="#{sellAdvertBean.advert.description}" styleClass="text" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.releaseYear)}"
                                            validatorMessage="#{labels['FIELD']} '#{labels['DESCRIPTION']}' #{labels.get('SYMBOLS_COUNT_EXCEED', 1000)}">
                                        <f:validateLength maximum="1000"/>
                                    </h:inputTextarea>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h:outputLabel id="contactLbl" value="#{labels['CONTACT_INFO']}:" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.releaseYear)}"/>
                                </td>
                                <td>
                                    <h:inputTextarea id="contact" value="#{sellAdvertBean.advert.contactInfo}" styleClass="text" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.releaseYear)}"
                                            validatorMessage="#{labels['FIELD']} '#{labels['CONTACT_INFO']}' #{labels.get('SYMBOLS_COUNT_EXCEED', 1000)}">
                                        <f:validateLength maximum="1000"/>
                                    </h:inputTextarea>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &#160;    
                                </td>
                                <td>
                                    <h:panelGroup id="addPhotoPanel" style="#{m:displayStyle(!empty sellAdvertBean.advert.vehicle.releaseYear)}">
                                        <h:selectBooleanCheckbox value="#{sellAdvertBean.addPhoto}" >
                                            <a:support event="onchange" reRender="photosLbl, photosPanel" ajaxSingle="true"/>
                                        </h:selectBooleanCheckbox>#{labels['ADD_PHOTO']} (#{labels['MAXIMUM']} #{config.photoQuantity})
                                    </h:panelGroup>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <h:outputLabel id="photosLbl" value="#{labels['PHOTOS']}:" style="#{m:displayStyle(sellAdvertBean.addPhoto)}"/>
                                </td>
                                <td>
                                    <h:panelGroup id="photosPanel" style="#{m:displayStyle(sellAdvertBean.addPhoto)}">
                                        <r:fileUpload fileUploadListener="#{sellAdvertBean.onFileUploaded}"
                                                      acceptedTypes="jpeg, jpg" maxFilesQuantity="#{config.photoQuantity}" noDuplicate="true" allowFlash="true"
                                                      fileEntryClass="uploadEntryClass"
                                                      addControlLabel="#{labels['ADD']}" uploadControlLabel="#{labels['UPLOAD']}" cancelEntryControlLabel="#{labels['CANCEL']}"
                                                      clearAllControlLabel="#{labels['CLEAR_ALL']}" clearControlLabel="#{labels['CLEAR']}" doneLabel="#{labels['DONE']}"
                                                      stopControlLabel="#{labels['STOP']}" stopEntryControlLabel="#{labels['STOP']}"
                                                      sizeErrorLabel="#{labels['SIZE_ERROR']}" transferErrorLabel="#{labels['TRANSFER_ERROR']}"
                                                      listWidth="350px" listHeight="124px"/>
                                        <span style="font-size:8pt;">
                                            *#{labels['MAX_FILE_SIZE_WARNING']}
                                        </span>
                                    </h:panelGroup>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">&#160;</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="rj">
                                    <h:panelGroup id="saveButton">
                                        <h:commandButton value="#{labels['READY']}" action="#{sellAdvertBean.createAdvert}" disabled="#{empty sellAdvertBean.advert.vehicle.releaseYear}"/>&#160;
                                        <h:commandButton value="#{labels['CANCEL']}" action="#{sellAdvertBean.cancel}" immediate="true"/>
                                    </h:panelGroup>
                                </td>
                            </tr>
                        </table>
                    </h:form>
                </fieldset>
            </div>

        </ui:decorate>
    </ui:define>
</ui:composition>
</html>